<template>
	<section v-loading="listLoading">
		
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.content" placeholder="订单号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="users" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column label="订单号" prop="businessOrderNo" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="下单人信息" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<div v-if="scope.row.userInfo">{{scope.row.userInfo.nickname}}</div>
	        		<div v-if="scope.row.userInfo">{{scope.row.userInfo.phone}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column label="收货人信息" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<div v-if="scope.row.addressInfo">{{scope.row.addressInfo.realName}}</div>
	        		<div v-if="scope.row.addressInfo">{{scope.row.addressInfo.phone}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column label="收货地址" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<div v-if="scope.row.addressInfo">{{scope.row.addressInfo.province}}{{scope.row.addressInfo.city}}{{scope.row.addressInfo.district}}{{scope.row.addressInfo.detail}}</div>
	        	</template>
	        </el-table-column>
	        <el-table-column label="商品名称" prop="goodsInfo.name" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="商品图片" align="center" width="80">
                <template slot-scope="scope">
                	<div v-if="scope.row.goodsInfo && scope.row.goodsInfo.url">
                		<el-button size="small" type="text" @click="handlePhoto(scope.$index,scope.row.goodsInfo.url)">
            			    <img :src="scope.row.goodsInfo.url.split(',')[0]" style="width: 50px;height: 50px;object-fit: cover;border-radius: 5px;"/>
            	    	</el-button>
                	</div>
            	</template>
            </el-table-column>
	        <el-table-column label="实际支付金额" prop="actualPaymentSum" min-width="60" align="center">
	        	<template slot-scope="scope">
	        		<span>{{scope.row.actualPaymentSum}}元</span>
	        	</template>
	        </el-table-column>
	        <el-table-column label="实际支付积分" prop="goodsInfo.pointsNum" min-width="60" align="center">
	        </el-table-column>
	        <el-table-column label="支付方式" prop="paymentType" min-width="80" align="center">
	        	<template slot-scope="scope">
	        		<span>{{scope.row.paymentType===0?'支付宝' :scope.row.paymentType===1?'微信' :'余额'}}</span>
	        	</template>
	        </el-table-column>
	        <el-table-column label="物流名称" prop="waybillName" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="物流单号" prop="waybillNum" width="140" align="center">
	        	<template slot-scope="scope">
            		<el-button size="small" type="text" @click="handleLogisticeInfo(scope.row)">{{scope.row.waybillNum}}</el-button>
            	</template>
	        </el-table-column>
	        <el-table-column label="退款金额" prop="orderRefundInfo.refundPrice" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="退款积分" prop="orderRefundInfo.refundPoints" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column label="补充描述" prop="orderRefundInfo.remark" min-width="80" align="center">
	        </el-table-column>
	        <el-table-column  label="图片" width="70" align="center">
	          <template slot-scope="scope">
	        	  <div v-if="scope.row.orderRefundInfo && scope.row.orderRefundInfo.remarkPic">
	        		  <el-button size="small" type="text" @click="handlePhoto(1,scope.row.remarkPic)">
	    			      <img :src="scope.row.remarkPic.remarkPic.split(',')[0]" style="width: 50px;height: 50px;object-fit: cover;border-radius: 5px;"/>
	    	    	  </el-button>
	        	  </div>
			    </template>
			</el-table-column>
			<el-table-column label="类型" min-width="80" align="center">
		    	<template slot-scope="scope">
		    		<span v-if="scope.row.orderRefundInfo">{{scope.row.orderRefundInfo.orderType===0?'仅退款' :'退货退款'}}</span>
		    	</template>
	        </el-table-column>
	        <el-table-column label="退款状态" min-width="80" align="center">
		    	<template slot-scope="scope">
		    		<div v-if="scope.row.orderRefundInfo">{{scope.row.orderRefundInfo.status===0?'审核中' :scope.row.orderRefundInfo.status===1?'待退款' :scope.row.orderRefundInfo.status===2?'已拒绝' :'退款成功'}}</div>
		    		<div v-if="scope.row.orderRefundInfo && scope.row.orderRefundInfo.status==2">拒绝原因：{{scope.row.account}}</div>
		    	</template>
	        </el-table-column>
			<el-table-column prop="createTime" label="创建时间" :formatter="formatDate"  min-width="110" align="center">
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<el-dialog :visible.sync="photoFormVisible" :close-on-click-modal="false" style="margin-top: -30px;">
    	  <el-carousel indicator-position="outside" height="600px">
            <el-carousel-item v-for="item in this.photoForm.photo.split(',')" :key="item.index">
                <img :src="item" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
            </el-carousel-item>
          </el-carousel>
	    </el-dialog>
	    <!--物流-->
		<el-dialog title="物流详情" :visible.sync="logsiFormVisible" :close-on-click-modal="false" width="500px">
			<div class="logistics">
				<div class="logisticsDetail">
				    <div class="logisticsDetailItem" v-for="(item,index) in logList">
				      <div class="logisticsDetailItemLeft">
				        <div v-if="index==0" class="activelogisticsDetailItemLeftPoint"></div>
				        <div v-else class="logisticsDetailItemLeftPoint"></div>
				        <div class="logisticsDetailItemLeftLine" v-if="index != list.length-1"></div>
				      </div>
				      <div class="logisticsDetailItemRight">
				      	<span v-if="index==0" class="activelogisticsDetailItemRightText">{{item.context}}</span>
				        <span v-if="index !==0" class="logisticsDetailItemRightText">{{item.context}}</span>
				        <span v-if="index==0" class="activelogisticsDetailItemRightText1">{{item.time}}</span>
				        <span v-if="index !==0" class="logisticsDetailItemRightText1">{{item.time}}</span>
				      </div>
				    </div>
				</div>
			</div>
		</el-dialog>
	    
	</section>
</template>

<script>
	export default {
		data() {
			return {
				filters: {
					content: '',
				},
				
				users: [],
				option:[],
				list:[],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				photoFormVisible: false,
				photoForm:{
					photo:''
				},
				logsiFormVisible:false,
			    logList:[],
			    logoData:{},
			}
		},
		methods: {
			
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.createTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
            
            selsChange: function (sels) {
				this.sels = sels;
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
					page: this.page,
					limit: this.pageSize,
					shopId: sessionStorage.getItem('shopId'),
					content: this.filters.content,
					status: 4
				};
				
				this.$http.post('api/goodsOrder/orderList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 200) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.data.totalNum;
						this.users = res.data.items;
						this.data = res.data;
						this.listLoading = false;
					}
				});
			},
			//显示图片页面
			handlePhoto: function (index, row) {
				this.photoFormVisible = true;
				console.log(row);
				this.photoForm.photo = row;
			},
			//查看物流详情
		    handleLogisticeInfo(row){
		    	this.logsiFormVisible = true
		    	this.logList = []
		    	let params = {
		    		wayBillNum:row.waybillNum,
		    		userId:row.userInfo.id
		    	}
		    	this.$http.post('api/goodsOrder/getlogisticsInfo', this.qs.stringify(params)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 200) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						console.log(res)
					    var info = JSON.parse(res.data)
					    if (info.result==false) {
					    	this.logList.push({
					    		context:'暂无快递信息'
					    	})
					    }else{
					    	this.logList = info.data
					    }
					}
				});
		    },
		},
		mounted() {
			this.getUsers();
		}
	}

</script>
<style>
	.detail{
	  	display: flex;
	  	flex-direction: row;
	  	padding: 10px 0px;
	}
	.detailDiv{
	  	font-weight: bold;
	  	color: #000000;
	  	width: 150px;
	}
	.detailDiv1{
	  	color: #000000;
	}
</style>
